﻿
    
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>     
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

    <script>

            $(function () {
                function latlong() {
                    return new google.maps.LatLng($("#lat").val(), $("#lng").val());
                }
                function position() {
                    map.setCenter(latlong());
                }

                $("#lat, #lng").spinner({
                    step: .001,
                    change: position,
                    stop: position
                });


                var map = new google.maps.Map($("#map")[0], {
                    zoom: 15,
                    center: latlong(),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });


                /* Agregar un Marcador */

                var marker = new google.maps.Marker({
                    position: latlong,
                    map: map,
                    icon: '/Views/Sector/marker-pink.png'
                });


                /* Personalizar marcar */

                var image = '/Views/Sector/marker-pink.png';
                var myLatLng = new google.maps.LatLng(-7.155613, -78.514849);
                
                var nuevoMarker1 = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: image,
                    title: 'Casa de Majito'
                });

                /*contenido del div del marker*/
               var infowindow1 = new google.maps.InfoWindow({
                    content: createInfo('Casa de Majito', '<br/>Visita la web de mi proyecto SILAS<br/><a title="Click" href="#">Click Aqui</a>')
                });

                /* div del marker */
                function createInfo(title, content) {
                    return '<div class="infowindow"><strong>' + title + '</strong> ' + content + '</div>';
                }

                /* Evento Click del marker */
                google.maps.event.addListener(nuevoMarker1, "click", function () {
                    infowindow1.open(map, nuevoMarker1);
                });

                

            });
        </script>

        <style>
        #map {
            width:480px;
            height:500px;
        }
        </style>        
    
    


 <br />


     <fieldset>
    <legend><b>Información Ubicación Distrital</b></legend>
        <label for="lat">Latitud     :  </label>
        <input id="lat" name="lat" value= "-7.156" />
        <br /><br />
        <label for="lng">Longitud :  </label>
        <input id="lng" name="lng" value= "-78.514849" />
        <br /><br />
        <label for="alt">Altura :  </label>
        <input id="altu" name="altura" value= "2720" />
        <br /><br />
        <div id="map"></div>

    </fieldset>




 
 